<template>
  <div class="demand1">
    <SwitchCard
      :tabList="tabList"
      @switchTab="radioChange"
      :currentChoose="currentChoose"
      class="scrollItem"
      ref="scroll"
    >
      <template #card1>
        <div>
          <div class="scroll" ref="roll">
            <div v-for="item in listData1" :key="item.id">
              <span class="message">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #card2>
        <div :currentChoose="currentChoose">
          <div class="scroll">
            <div v-for="item in listData2" :key="item.id">
              <span class="message">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </template>
    </SwitchCard>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, onUnmounted, nextTick, onMounted } from 'vue'
import stateData from '../../index'
const state = reactive({
  ...stateData
})
console.log(state)
//定时器初始化
let timer = ref(null)
//ref绑定初始化
let roll = ref(null)
//列表数据初始化
const listData1 = reactive(state.listData1)
const listData2 = reactive(state.listData2)
let tabList = reactive([{ text: '公告' }, { text: '动态' }])
// 滚动定时器
let scrollTimer = []
const cardScroll = tbody => {
  let cardScroll = true
  const cardDom = tbody.getElementsByClassName('card-content')[0]
  cardDom.scrollTop = 0
  //   鼠标放上去停止滚动
  cardDom.addEventListener('mousemove', () => {
    cardScroll = false
  })
  // 鼠标移出正常滚动
  cardDom.addEventListener('mouseout', () => {
    cardScroll = true
  })
  //   console.log(cardDom.clientHeight)
  //   console.log(cardDom.scrollTop)
  //   console.log(cardDom.scrollHeight)
  scrollTimer.push(
    setInterval(() => {
      if (cardScroll) {
        cardDom.scrollTop += 1
        if (cardDom.clientHeight + cardDom.scrollTop == cardDom.scrollHeight) {
          cardDom.scrollTop = 0
        }
      }
    }, 100)
  )
}
const scroll = ref()
onMounted(() => {
  scrollTimer.map(item => item && clearInterval(item))

  setTimeout(() => {
    // 获取top10卡片dom节点
    // 使用下面的方法无法获取到dom节点，需使用ref来获取
    // let cardBody = document.getElementById('scrollItem')
    let cardBody = scroll.value.$el
    cardScroll(cardBody)
  }, 500)
})
let currentChoose = ref(0)
function radioChange(key, keyPath) {
  console.log(key, keyPath)
  currentChoose.value = keyPath
  let cardDom = scroll.value.$el.getElementsByClassName('card-content')[0]
  cardDom.scrollTop = 0
}
onBeforeUnmount(() => {
  scrollTimer.map(item => item && clearInterval(item))
  scrollTimer = []
})
</script>
<style lang="scss" scoped>
.demand1 {
  &::-webkit-scrollbar {
    display: none;
  }

  width: 100%;
  height: 100%;
  :deep(.card-content) {
    height: 280px;
    overflow-y: auto;
  }

  .scroll {
    height: auto;
    margin: 20px;
    color: black;
  }
  .message {
    display: block;
    margin-bottom: 10px;
  }
}
</style>
